<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/yy-baseutils@1.2.0/dist/yy-baseutils.js"></script>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./__modules__.js"></script>
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      .btn {
        width: 80px;
        height: 30px;
        border: 1px solid red;
        background: yellowgreen;
        line-height: 30px;
        text-align: center;
        font-weight: 700;
      }
      .btn-l {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 999;
      }
      .btns {
        position: absolute;
        top: 10px;
        right: 200px;
        z-index: 999;
        display: flex;
      }
    </style>
  </head>
  <body>
    <div  class="btn btn-l">
      <img style="height: 100px;" src="./model/123.webp" />
    </div>
    <div class="btn btn-l" onclick="myExport('1')">分别导出</div>
    <div class="btn btn-l" style="left: 100px" onclick="myExport('2')">
      导出
    </div>
  </body>
</html>
<!-- <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.168.0/build/three.module.js",
      "GLTFLoader":"https://unpkg.com/three@0.168.0/examples/jsm/loaders/GLTFLoader.js",
      "MeshoptDecoder":"https://unpkg.com/three@0.168.0/examples/jsm/libs/meshopt_decoder.module.js",
      "OrbitControls":"https://unpkg.com/three@0.168.0/examples/jsm/controls/OrbitControls.js",
      "GLTFExporter":"https://unpkg.com/three@0.168.0/examples/jsm/exporters/GLTFExporter.js",
    }
  }

</script> -->
<script type="module">
  import * as THREE from "https://unpkg.com/three@0.126.0/build/three.module.js";
  import { GLTFLoader } from "https://unpkg.com/three@0.126.0/examples/jsm/loaders/GLTFLoader.js";
  import { MeshoptDecoder } from "https://unpkg.com/three@0.126.0/examples/jsm/libs/meshopt_decoder.module.js";
  import { OrbitControls } from "https://unpkg.com/three@0.126.0/examples/jsm/controls/OrbitControls.js";
  import { GLTFExporter } from "https://unpkg.com/three@0.126.0/examples/jsm/exporters/GLTFExporter.js";
  // import yyUtils from 'https://unpkg.com/yy-baseutils'
  // console.log("gollll",yyUtils)
  ///////////////////////////////////////////////////////////////////////////////////////////////
  // import * as THREE from "https://threejs.org/build/three.module.js";
  // import { GLTFLoader } from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js";
  // import { MeshoptDecoder } from "https://threejs.org/examples/jsm/libs/meshopt_decoder.module.js";
  // import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
  // import { GLTFExporter } from "https://threejs.org/examples/jsm/exporters/GLTFExporter.js";
  //   import { VRMLLoader } from "https://threejs.org/examples/jsm/loaders/VRMLLoader.js";
  // import * as THREE from "../view/js/three/build/three.module.js";
  // import { GLTFLoader } from "../view/js/three/examples/jsm/loaders/GLTFLoader.js";
  // import { MeshoptDecoder } from "../view/js/three/examples/jsm/libs/meshopt_decoder.module.js";
  // import { OrbitControls } from "../view/js/three/examples/jsm/controls/OrbitControls.js";
  // import { GLTFExporter } from "../view/js/three/examples/jsm/exporters/GLTFExporter.js";
  
  var scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  var renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000000
  );
  var controls = new OrbitControls(camera, renderer.domElement);
  // 如果使用animate方法时，将此函数删除
  controls.addEventListener("change", againRenderer);
  addLight(0, 200, 0, 0xffffff, 0.6);
  addLight(0, -200, 0, 0xffffff, 0.6);
  addLight(200, 0, 0, 0xffffff, 0.6);
  addLight(-200, 0, 0, 0xa29f9f, 0.6);
  addLight(0, 0, 200, 0xffffff, 0.6);
  addLight(0, 0, -200, 0x5e5c5c, 0.6);
  function addLight(x, y, z, color, intensity) {
    var directionalLight = new THREE.DirectionalLight(color, intensity);
    directionalLight.position.set(x, y, z);
    scene.add(directionalLight);
    directionalLight.castShadow = false;
  }

  const loader = new GLTFLoader();
  loader.setMeshoptDecoder(MeshoptDecoder);
  let group = new THREE.Group();
  let models = [],
    model = null;
  function getCaption(obj) {
    var index = obj.lastIndexOf("\/");
    obj = obj.substring(index + 1, obj.length);
    // console.log(obj);
    return obj;
  }

  myLoaders(loader, group);
  function myLoaders(loader, group) {

    loader.setPath("./model/");
    loader.load("car.glb", (glb) => {
      // const object = getObject(glb);
      const object = glb.scene;
      group.add(object);
      models.push({
        obj: object,
        name: "bee",
      });
      scene.add(group);
      model = {
        obj: group,
        name: "hh.glb",
      };
      yyUtils.modelsUtils.getModelPosition(group, controls, 45);
    });
  }

  function getObject(object) {
    let arr = [];
    let group = new THREE.Group();
    console.log(object.scene);
    setScene(arr, object.scene);
    arr.forEach((i) => {
      removeMeshBasicMaterialAndLineSegments(i, object.scene, group);
    });
    return object.scene;
  }
  function setScene(arr, obj) {
    if (obj instanceof THREE.Mesh) {
      if (obj.material instanceof THREE.MeshBasicMaterial) {
        arr.push(obj);
        return;
      }
    }
    if (obj instanceof THREE.LineSegments) {
      arr.push(obj);
      return;
    }
    if (obj.children) {
      for (let i = 0; i < obj.children.length; i++) {
        setScene(arr, obj.children[i]);
      }
    }
  }
  function removeMeshBasicMaterialAndLineSegments(obj, scene, group) {
    if (obj.name === scene.name) {
      group.add(scene);
    } else if (scene.children) {
      for (let i = 0; i < scene.children.length; i++) {
        removeMeshBasicMaterialAndLineSegments(obj, scene.children[i], group);
      }
    }
  }
  function againRenderer() {
    //   requestAnimationFrame(againRenderer);
    renderer.render(scene, camera);
  }
  let gltfExporter = new GLTFExporter();

  window.myModelExport = function (type) {
    if (type == 1) {
      for (let i = 0; i < models.length; i++) {
        dowExports(models[i].obj, models[i].name);
      }
    } else {
      dowExports(model.obj, model.name);
    }
  };

  function dowExports(model, name) {
    gltfExporter.parse(model, function (result) {
      console.log(result);
      let link = document.createElement("a");
      link.style.display = "none";
      document.body.appendChild(link);
      link.href = URL.createObjectURL(
        new Blob([JSON.stringify(result)], { type: "text/plain" })
      );
      link.download = name;
      link.click();
      document.body.removeChild(link);
    });
  }
</script>
<script>
  var vConsole = new window.VConsole();

  function myExport(type) {
    window.myModelExport(type);
  }

  axios
    .get("./model/car.glb")
    .then(function (response) {
      console.log(response,'rrrrrrrrrrrr');
    })
    .catch(function (error) {
      console.log(error);
    });

</script>
